<%@page import="org.springframework.web.servlet.mvc.support.RedirectAttributes"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib prefix="pg" uri="http://jsptags.com/tags/navigation/pager"%>
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>管理学员信息</title>
	</head>

	<body class="skin-2">
		
			<div class="main-content">
				<!-- #section:basics/content.breadcrumbs -->
				<div class="breadcrumbs" id="breadcrumbs">
					<script type="text/javascript">
						try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
					</script>

					<ul class="breadcrumb">
						<li>
							<i class="ace-icon fa fa-home home-icon"></i>
							<a href="#">管理学员信息</a>
						</li>
					</ul><!-- /.breadcrumb -->

					<!-- #section:basics/content.searchbox -->
					<div class="nav-search" id="nav-search">
						<form class="form-search">
							<span class="input-icon">
								<input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" />
								<i class="ace-icon fa fa-search nav-search-icon"></i>
							</span>
						</form>
					</div><!-- /.nav-search -->

					<!-- /section:basics/content.searchbox -->
				</div>

				<!-- /section:basics/content.breadcrumbs -->
				<div class="page-content">
					<!-- #section:settings.box -->
					<div class="ace-settings-container" id="ace-settings-container">
						<div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
							<i class="ace-icon fa fa-cog bigger-150"></i>
						</div>

						<div class="ace-settings-box clearfix" id="ace-settings-box">
							<div class="pull-left width-50">
								<!-- #section:settings.skins -->
								<div class="ace-settings-item">
									<div class="pull-left">
										<select id="skin-colorpicker" class="hide">
											<option data-skin="no-skin" value="#438EB9">#438EB9</option>
											<option data-skin="skin-1" value="#222A2D">#222A2D</option>
											<option data-skin="skin-2" value="#C6487E">#C6487E</option>
											<option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
										</select>
									</div>
									<span>&nbsp; Choose Skin</span>
								</div>

								<!-- /section:settings.skins -->

								<!-- #section:settings.navbar -->
								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-navbar">
									<label class="lbl" for="ace-settings-navbar"> Fixed Navbar</label>
								</div>

								<!-- /section:settings.navbar -->

								<!-- #section:settings.sidebar -->
								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-sidebar">
									<label class="lbl" for="ace-settings-sidebar"> Fixed Sidebar</label>
								</div>

								<!-- /section:settings.sidebar -->

								<!-- #section:settings.breadcrumbs -->
								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-breadcrumbs">
									<label class="lbl" for="ace-settings-breadcrumbs"> Fixed Breadcrumbs</label>
								</div>

								<!-- /section:settings.breadcrumbs -->

								<!-- #section:settings.rtl -->
								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl">
									<label class="lbl" for="ace-settings-rtl"> Right To Left (rtl)</label>
								</div>

								<!-- /section:settings.rtl -->

								<!-- #section:settings.container -->
								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-add-container">
									<label class="lbl" for="ace-settings-add-container">
										Inside
										<b>.container</b>
									</label>
								</div>

								<!-- /section:settings.container -->
							</div><!-- /.pull-left -->

							<div class="pull-left width-50">
								<!-- #section:basics/sidebar.options -->
								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-hover">
									<label class="lbl" for="ace-settings-hover"> Submenu on Hover</label>
								</div>

								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-compact">
									<label class="lbl" for="ace-settings-compact"> Compact Sidebar</label>
								</div>

								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-highlight">
									<label class="lbl" for="ace-settings-highlight"> Alt. Active Item</label>
								</div>

								<!-- /section:basics/sidebar.options -->
							</div><!-- /.pull-left -->
						</div><!-- /.ace-settings-box -->
					</div>
					<!-- /.ace-settings-container -->
					<!-- /section:settings.box -->
					
					<!-- 增删改查提示信息 -->
					<div id="tishi" style="background-color:#cde5c8;height:60px;margin-bottom:30px;line-height:60px;color:#128535;padding-left:50px;font-size:16px;position:relative;display:none;">
						
					</div>
					<!-- /section:settings.box -->
					<div class="page-content-area">
						<div class="row">
							<div class="col-xs-12">
								<!-- PAGE CONTENT BEGINS -->
								<div class="row">
									<div class="col-xs-12 table-responsive">
										<button id="deleteMore" class="btn btn-danger">
											批量删除
										</button>
										<button id="addStudent" class="btn btn-primary">
											<i class="ace-icon fa fa-plus align-top bigger-125"></i>
											添加用户
										</button>
										<button id="batchAddStudentBtn" class="btn btn-primary">
											<i class="ace-icon fa fa-plus align-top bigger-125"></i>
											批量添加用户信息
										</button>
										<div class="pull-right" style="margin-right:50px;">
											<select id="language">
												<option value="zh_CN"><spring:message code="page.index.chinese" /></option>
												<option value="en_US"><spring:message code="page.index.english" /></option>
											</select>
										</div>
										<table id="sample-table-1" class="table table-condensed table-bordered table-hover">
											<thead>
												<tr>
													<th class="center">
														<label class="position-relative">
															<input type="checkbox" class="ace" />
															<span class="lbl"></span>
														</label>
													</th>
													<th><spring:message code="user.id.message" /></th>
													<th><spring:message code="user.userName.message" /></th>
													<th><spring:message code="user.name.message" /></th>
													<th><spring:message code="user.gender.message" /></th>
													<th><spring:message code="user.birthday.message" /></th>
													<th><spring:message code="user.tel.message" /></th>
													<th><spring:message code="user.email.message" /></th>
													<th><spring:message code="user.address.message" /></th>
													<th><spring:message code="user.userRole.message" /></th>
													<th><spring:message code="user.action.message" /></th>
												</tr>
											</thead>

											<tbody>
												<c:forEach items="${userList.dates}" var="user">
													<tr>
														<td class="center">
															<label class="position-relative">
																<input type="checkbox" class="ace" value="${user.id}" />
																<span class="lbl"></span>
															</label>
														</td>
														<td>${user.id}</td>
														<td>${user.userName}</td>
														<td>${user.name}</td>
														<td>${user.gender}</td>
														<td>${user.birthday}</td>
														<td>${user.tel}</td>
														<td>${user.email}</td>
														<td>${user.address}</td>
														<td>${user.roleName}</td>
														<td>
															<a href="userEdit/${user.id}" title="修改" class="btn btn-xs btn-info">
																<i class="ace-icon fa fa-pencil bigger-120"></i>
															</a>
															<a href="javascript:void(0)" title="删除" onclick="deleteuser(${user.id})" class="btn btn-xs btn-danger">
																<i class="ace-icon fa fa-trash-o bigger-120"></i>
															</a>
															<c:if test="${user.roleId == 1}">
																<a href="javascript:void(0)" title="查看考试科目" class="btn btn-xs btn-primary manager-student-subject">
																	<i class="icon-only ace-icon fa fa-align-justify"></i>
																</a>
															</c:if>
															<!-- 学生关联科目模态框 -->
															<div class="modal fade manager-student-subject-modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
															  <div class="modal-dialog" role="document">
															    <div class="modal-content">
															    	<div class="modal-header">
																        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
																        <h4 class="modal-title" id="myModalLabel" style="font-weight:bolder;color:#aaa;">${user.name} 的考试科目：</h4>
																    </div>
																    <div class="modal-body">
																    	<table class="table">
																    		<tr>
																    			<td><b>科目名称</b></td>
																    			<td><b>考试状态</b></td>
																    			<td><b>考试时间</b></td>
																    			<td><b>分数</b></td>
																    		</tr>
																    		<c:forEach items="${user.subjectVOList}" var="subject">
																    			<tr>
																    				<td>${subject.name}</td>
																    				<td>
																    					<c:if test="${!empty subject.scoreId}">已考</c:if>
																    					<c:if test="${empty subject.scoreId}">未考</c:if>
																    				</td>
																    				<td>
																    					<c:if test="${!empty subject.scoreId}">${subject.scoreExamTime}</c:if>
																    					<c:if test="${empty subject.scoreId}">无</c:if>
																    				</td>
																    				<td>
																    					<c:if test="${!empty subject.scoreId}">${subject.score}</c:if>
																    					<c:if test="${empty subject.scoreId}">无</c:if>
																    				</td>
																    			</tr>
																		      <!-- <p style="font-weight:bolder;font-size:16px;color:#333">${subject.name}</p> -->
																		    </c:forEach>
																    	</table>
																      
																    </div>
															    </div>
															  </div>
															</div><!-- 学生关联科目模态框END -->
															
														</td>
													</tr>
												</c:forEach>
												<tr>
													<td colspan="12">
														<jsp:include page="../page/page.jsp">
															<jsp:param name="url" value="users"/>
															<jsp:param name="items" value="${userList.totalSize}"/>
														</jsp:include>
													</td>
												</tr>
											</tbody>
										</table>
										
										<!-- 添加学生模态框 -->
										<div class="modal fade" id="add-student-modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
										  <div class="modal-dialog" role="document">
										    <div class="modal-content">
										    	<div class="modal-header">
											        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
											        <h4 class="modal-title" id="myModalLabel" style="font-weight:bolder;color:#aaa;">添加用户</h4>
											    </div>
											    <div class="modal-body">
											    	<form:form class="form form-horizontal" id="userForm" action="userAdd" method="post" modelAttribute="user">
														<div class="form-group">
															<label for="userName" class="col-sm-2 control-label"><i style="color:red">* </i><b>用户名:</b></label>
															<div class="col-sm-5">
																<form:input class="form-control" path="userName" placeholder="用户名" /><form:errors path="userName" cssClass="error" cssStyle="color:red" />
															</div>
														</div>
														<div class="form-group">
															<label for="password" class="col-sm-2 control-label"><i style="color:red">* </i><b>密码:</b></label>
															<div class="col-sm-5">
																<form:input type="password" path="password" class="form-control" placeholder="密码" /><form:errors path="password" cssClass="error" cssStyle="color:red" />
															</div>
														</div>
														<div class="form-group">
															<label for="name" class="col-sm-2 control-label"><i style="color:red">* </i><b>姓名:</b></label>
															<div class="col-sm-5">
																<form:input path="name" class="form-control" placeholder="真实姓名" /><form:errors path="name" cssClass="error" cssStyle="color:red" />
															</div>
														</div>
														<div class="form-group">
															<label for="gender" class="col-sm-2 control-label"><i style="color:red">* </i><b>性别:</b></label>&nbsp;&nbsp;&nbsp;&nbsp;
															<form:radiobutton path="gender" value="男" checked="true" />男&nbsp;&nbsp;&nbsp;&nbsp;<form:radiobutton path="gender" value="女" />女
															<form:errors path="gender" cssClass="error" cssStyle="color:red" />
														</div>
														<div class="form-group">
															<label for="birthday" class="col-sm-2 control-label"><i style="color:red">* </i><b>出生日期:</b></label>
															<div class="col-sm-4">
																<form:input type="date" path="birthday" class="form-control" placeholder="出生日期" /><form:errors path="birthday" cssClass="error" cssStyle="color:red" />
															</div>
														</div>
														<div class="form-group">
															<label for="tel" class="col-sm-2 control-label"><i style="color:red">* </i><b>手机号码:</b></label>
															<div class="col-sm-5">
																<form:input type="number" path="tel"  class="form-control" placeholder="手机号码" /><form:errors path="tel" cssClass="error" cssStyle="color:red" />
															</div>
														</div>
														<div class="form-group">
															<label for="address" class="col-sm-2 control-label"><i style="color:red">* </i><b>住址:</b></label>
															<div class="col-sm-5">
																<form:input path="address"  class="form-control" placeholder="居住地址" /><form:errors path="address" cssClass="error" cssStyle="color:red" />
															</div>
														</div>
														<div class="form-group">
															<label for="email" class="col-sm-2 control-label"><i style="color:red">* </i><b>邮箱:</b></label>
															<div class="col-sm-5">
																<form:input type="email" path="email"  class="form-control" placeholder="邮箱" /><form:errors path="email" cssClass="error" cssStyle="color:red" />
															</div>
														</div>
														
														<div class="form-group">
															<button type="submit" class="btn btn-large btn-block btn-primary">提交</button>
															<button type="reset" class="btn btn-default btn-block">重置</button>
														</div>
												</form:form>
											    </div>
										    </div>
										  </div>
										</div><!-- 添加学生模态框 END -->
										
										<!-- 上传文件模态框 -->
										<div id="uploadFileModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
											<div class="modal-dialog">
												<div class="modal-content">
												  <div class="modal-header">
												    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
												    <h4 id="myModalLabel">文件上传</h4>
												  </div>
												  <div class="modal-body">
												    <input id="uploadFile" name="uploadFile" type="file" />
												  </div>
												  <div class="modal-footer">
												    <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
												  	<button id="subjectStudentSaveBtn" type="button" class="btn btn-primary">保存</button>
												  </div>
												</div>
											</div>
										</div><!-- showTestModal end -->
										
									</div><!-- /.span -->
								</div><!-- /.row -->
							</div><!-- /.col -->
						</div><!-- /.row -->
					</div><!-- /.page-content-area -->
				</div><!-- /.page-content -->
			</div><!-- /.main-content -->

		<!-- basic scripts -->

		<!--[if !IE]> -->
		<script type="text/javascript">
			window.jQuery || document.write("<script src='${pageContext.request.contextPath}/static/assets/js/jquery.min.js'>"+"<"+"/script>");
		</script>

		<!-- <![endif]-->

		<!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='../assets/js/jquery1x.min.js'>"+"<"+"/script>");
</script>
<![endif]-->
		<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='${pageContext.request.contextPath}/static/assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>
		<script src="${pageContext.request.contextPath}/static/assets/js/bootstrap.min.js"></script>

		<!-- page specific plugin scripts -->
		<script src="${pageContext.request.contextPath}/static/assets/js/jquery.dataTables.min.js"></script>
		<script src="${pageContext.request.contextPath}/static/assets/js/jquery.dataTables.bootstrap.js"></script>

		<!-- ace scripts -->
		<script src="${pageContext.request.contextPath}/static/assets/js/ace-elements.min.js"></script>
		<script src="${pageContext.request.contextPath}/static/assets/js/ace.min.js"></script>

		<!-- inline scripts related to this page -->
		<script type="text/javascript">
			jQuery(function($) {
				
				//批量删除
				$("#deleteMore").click(function(){
					if(confirm("确定删除已勾选的用户？")){
						var idArr = [];
						for(var i = 0; i < $("#sample-table-1 input[type='checkbox']:checked").length; i++){
							idArr[i] = $($("#sample-table-1 input[type='checkbox']:checked")[i]).val();
						}
						$.ajax({
							type:"POST",
							url:"deleteMore",
							dataType:"json",
							traditional: true,
							data:{
								"idArr":idArr
							},
							success:function(data){
								if(true == data.success){
									alert("批量删除成功");
									window.location.reload();
								}else{
									alert("批量删除失败");
								}
							}
						})
					}
				})
				
				//添加学生模态框
				$("#addStudent").click(function(){
					$("#add-student-modal").modal("show");
				})
				
				//点击查看学生考试科目按钮显显模态框
				$(".manager-student-subject").on("click", function(){
					$(this).siblings(".manager-student-subject-modal").modal("show");
				})
				
				//弹出批量添加的模态框
				$("#batchAddStudentBtn").click(function(){
					$("#uploadFileModal").modal("show");
				})
				
				//显示上传控制样式
				$("#uploadFile").ace_file_input({
					style:"well",
					btn_choose:"请点击此处选择文件",
					btn_change:null,
					no_icon:"ace-icon fa fa-cloud-upload",
					droppable:true,
					thumbnail:"small",
					preview_error:function(filename, error_code){
					}
				}).on("change", function(){
					//console.log($(this).data('ace_input_files'));
					//console.log($(this).data('ace_input_method'));
				})
				
				//点击保存按钮保存并导入Excel数据进行批量添加学生
				$("#subjectStudentSaveBtn").on("click",function(){
					$.ajaxFileUpload({
						url:"uploadFile",//用于文件上传的服务器端请求地址
						secureuri:false, //一般设置为false
						fileElementId:"uploadFile", //文件上传控件的id属性<input type='file' id='uploadFile' name='uploadFile'>
													//$("form".serialize),表单序列化……。
						dataType:"json", //返回值类型一般设置为json
						complete:function(data){//只要完成即执行，最后执行
							//alert(data),
						},
						success:function(data){ //服务器成功响应处理函数
							if(data["success"]){
								alert(data["success"]);
								$("#uploadFileModal").modal("hide");
								$("#uploadFileModal input[id='uploadFile']").val("");
								window.location.reload();
							}else{
								alert(data["error"]);
							}
						},
						error:function(data, status, e){//服务器响应失败处理函数
							alert(e);
						}
					});
				})
				
				//语言切换
				if("中文" == $("#language option:first-child").text()){
					$("#language option:first-child").attr("selected",true);
				}else{
					$("#language option:last-child").attr("selected",true);
				}
				$("#language").change(function(){
					var value = $(this).val();
					window.location.href = "changeLocale?localeType=" + value;
				})
				
				var oTable1 = 
				$('#sample-table-2')
				//.wrap("<div class='dataTables_borderWrap' />")   //if you are applying horizontal scrolling (sScrollX)
				.dataTable( {
					bAutoWidth: false,
					"aoColumns": [
					  { "bSortable": false },
					  null, null,null, null, null,
					  { "bSortable": false }
					],
					"aaSorting": [],
			
					//,
					//"sScrollY": "200px",
					//"bPaginate": false,
			
					//"sScrollX": "100%",
					//"sScrollXInner": "120%",
					//"bScrollCollapse": true,
					//Note: if you are applying horizontal scrolling (sScrollX) on a ".table-bordered"
					//you may want to wrap the table inside a "div.dataTables_borderWrap" element
			
					//"iDisplayLength": 50
			    } );
				/**
				var tableTools = new $.fn.dataTable.TableTools( oTable1, {
					"sSwfPath": "../../copy_csv_xls_pdf.swf",
			        "buttons": [
			            "copy",
			            "csv",
			            "xls",
						"pdf",
			            "print"
			        ]
			    } );
			    $( tableTools.fnContainer() ).insertBefore('#sample-table-2');
				*/
			
			
				$(document).on('click', 'th input:checkbox' , function(){
					var that = this;
					$(this).closest('table').find('tr > td:first-child input:checkbox')
					.each(function(){
						this.checked = that.checked;
						$(this).closest('tr').toggleClass('selected');
					});
					
				});
			
			
				$('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
				function tooltip_placement(context, source) {
					var $source = $(source);
					var $parent = $source.closest('table')
					var off1 = $parent.offset();
					var w1 = $parent.width();
			
					var off2 = $source.offset();
					//var w2 = $source.width();
			
					if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
					return 'left';
				}
			
			});
			$(function () {
			  $('[data-toggle="tooltip"]').tooltip()
			});
			
			//增删改查提示
			$(document).ready(function(){
				if("${message}" == null || "${message}" == ""){
					$("#tishi").fadeOut("slow");
				}else{
					$("#tishi").html("<i class='iconfont icon-duigou1'></i> <b>Well done! </b> ${message} " + 
					"<span id='closetishi' style='display:inline-block;width:20px;height:20px;position:absolute;" + 
					"left:0;top:0;color:red;font-weight:bolder;background-color:#f6f2c4;line-height:20px;text-align:center;cursor:pointer;'>X</span>");
					$("#tishi").fadeIn("slow");
				}
				//点击关闭
				$('#closetishi').click(function(){
					$('#tishi').fadeOut("slow");
				});
			});

			//删除学员按钮
			function deleteuser(userName){
				if(window.confirm("确定删除该记录吗？")){
					location.href = "userDelete/" + userName;
				}
			}
		</script>
		
		<!-- jq文件上传js插件 -->
		<script src="${pageContext.request.contextPath}/static/assets/js/ajaxfileupload.js"></script>
		
		<!-- the following scripts are used in demo only for onpage help and you don't need them -->
		<link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/css/ace.onpage-help.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath}/static/docs/assets/js/themes/sunburst.css" />

		<script type="text/javascript"> ace.vars['base'] = '..'; </script>
		<script src="${pageContext.request.contextPath}/static/assets/js/ace/elements.onpage-help.js"></script>
		<script src="${pageContext.request.contextPath}/static/assets/js/ace/ace.onpage-help.js"></script>
		<script src="${pageContext.request.contextPath}/static/docs/assets/js/rainbow.js"></script>
		<script src="${pageContext.request.contextPath}/static/docs/assets/js/language/generic.js"></script>
		<script src="${pageContext.request.contextPath}/static/docs/assets/js/language/html.js"></script>
		<script src="${pageContext.request.contextPath}/static/docs/assets/js/language/css.js"></script>
		<script src="${pageContext.request.contextPath}/static/docs/assets/js/language/javascript.js"></script>
	
	</body>
	
</html>




